import { Button } from "@nextui-org/react"
import Image from "next/image"
import Link from "next/link"
import Pet from '@/public/svg/pet.svg'

function BlueText({text, blueText}){
    console.log('text', text,blueText)
    if(text){
        let allText = text.replace(blueText, ',')
        let [start, end] = allText.split(',')
        return <div className="default_font text-[56px] font-bold"> 
            <span>{start}</span>
            <span className="blueText text-[hsl(var(--nextui-primary-500))] text-[56px]">{blueText}</span>
            <span>{end}</span>
        </div>
    }else{
        return <>{text}</>
    }
}

// 文本及按钮组
function TextAndButtonGroup({title,desc,text,link,className}){
    return <div className={className?'text-button-content '+className:'text-button-content'}>
        <div className="title-content mb-[56px]">
            <div className="title-box mb-2">
                <BlueText {...title}></BlueText>
            </div>
            <div className="desc text-[var(--light-text-color-text-1)] text-[24px] font-normal opacity-60">
                {desc}
            </div>
        </div>
        <div className="text-content">
            <ol className="text-ol">
                {
                    Array.isArray(text)&&text.length>0 ? text.map((item, index) => <li key={index} className="text-li mb-[24px] text-[24px]">
                        <div className="flex items-center"><Pet style={{marginRight: '1rem'}}/>{item}</div>
                    </li>) : <></>
                }
            </ol>
        </div>
        <div className="button-group mt-[56px] flex">
            <Link href={link&&link.more?link.more:''}>
                <Button className="more bt-button mr-[24px] text-[18px] leading-[24px] h-[60px] w-[200px] px-[16px] " radius="md" color="primary">立即体验</Button>
            </Link>
            <Link href={link&&link.try?link.try:''}>
                <Button className="try bt-button text-[18px] leading-[24px] h-[60px] w-[200px] px-[16px] " radius="md"  color="primary" variant="bordered">了解更多</Button>
            </Link>
        </div>
    </div>
}
export default function BtPublicize({ type='right',messages,imageContent="/testPublicize.png",isLink=true,option={width: 300,height: 300} }){
    return <div className="bt-publicize mt-[76px] flex items-center w-[1388px] justify-center">
        {
            type  == "left"?<div className="flex-1 justify-center  w-[644px] flex"><TextAndButtonGroup className="left-text-group flex justify-center flex-col" {...messages}></TextAndButtonGroup></div>:<></>
        }
        <div className={type == "left"?'image-content flex justify-center w-[744px]':'image-content flex-1 flex justify-center'}>
            {isLink?<Image src={imageContent} width={option.width} height={option.height} alt="testPublicize"></Image>:imageContent}
        </div>
        {
            type  == "right"?<div className="flex-1 justify-center  w-[744px] flex"><TextAndButtonGroup className="right-text-group flex justify-center flex-col" {...messages}></TextAndButtonGroup></div>:<></>
        }
    </div>    
}